import styled from "@emotion/styled";
import { useAuth } from "context/auth-context"
import React from "react"
import {ProjectListScreen} from "screens/project-list"
import {Row} from "components/lib"
import {ReactComponent as SoftwareLogo} from "assets/logo.svg"
import { Button, Dropdown, Menu } from "antd";

export const AuthenticatedApp = () => {
    const {logout, user} = useAuth();
    return (
    <Container>
        <Header between={true}>
            <HeaderLeft gap={true}>
                <SoftwareLogo width={"3rem"} color={'rgb(38, 132, 255)'}></SoftwareLogo>
                <h2>项目</h2>
                <h2>用户</h2> 
            </HeaderLeft>
            <HeaderRight>
                <Dropdown overlay={<Menu>
                    <Menu.Item key={"logout"}>
                        <Button type={"link"} onClick={logout}>登出</Button>
                    </Menu.Item>
                </Menu>}>
                    <Button type={"link"} onClick={e => e.preventDefault()}>
                        Hi, {user?.name}
                    </Button>
                </Dropdown>
            </HeaderRight>  
        </Header>
        <Main>
            <ProjectListScreen/>
        </Main>
    </Container>)
}

const Container = styled.div`
    display: grid;
    grid-template-rows: 6rem 1fr; 
    height: 100vh;
`

const HeaderItem = styled.h3`
    margin-right: 3rem;
`

const Header = styled(Row)`
    /* display: flex;
    flex-direction: row;
    align-items: center; */
    padding: 3.2rem;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
`

const HeaderLeft = styled(Row)`
    /* display: flex;
    align-items: center; */
`

const HeaderRight = styled.div`
    /* display: flex;
    align-items: center; */
    /* grid-area: header; */
`

const Main = styled.main`
    /* grid-area: main; */
`